<template>
    <Teleport to="#before-navigation" v-if="targetExists">
        <div class="faq-list-box card-box" v-loading="loading">
            <h5 class="card-title">
                <!-- <el-icon size="20" color="#FB8B24"><Memo /></el-icon> -->
                 <img src="@/assets/img/icon5.png" alt="" style="display: block; width: 14px; margin-right: 10px" />
                {{ $t('mod.book.index.faq_list.tit') }}
            </h5>
            <div class="card-text">
                <ul>
                    <li v-for="faq in siteList" :key="faq.id" @click="jumpPageAction(faq.id)" :class="faq.id == id ? 'active' : ''">{{ faq.title }}</li>
                </ul>
            </div>
        </div>
    </Teleport>

    <div v-loading="loading">
        <div class="header-title">
            <h2>{{ $t('mod.book.index.tit') }}</h2>
            <div v-if="roleStore.isSuperAdmin">
                <el-button color="#d24c0e" @click="showEditWebPage('add', null)">{{ $t('mod.announcement.index.btn_txt2') }}</el-button>
                <el-button color="#d24c0e" @click="showEditWebPage('edit', id)">{{ $t('mod.announcement.index.btn_txt4') }}</el-button>
                <el-button color="red" @click="deleteAction(id)">{{ $t('mod.announcement.index.action_button_txt3') }}</el-button>
            </div>
        </div>
        <div class="nav-top">
            <div class="book-prev" @click="jumpPageAction(prevSiteInfo.id)">
                <template v-if="prevSiteInfo">
                    <el-icon size="16" color="#F06423"><CaretLeft /></el-icon>
                    <span>{{ $t('mod.announcement.index.prev_txt') }}：</span>
                    <span>{{ prevSiteInfo.title }}</span>
                </template>
            </div>
            <div class="book-next" @click="jumpPageAction(nextSiteInfo.id)">
                <template v-if="nextSiteInfo">
                    <span>{{ $t('mod.announcement.index.next_txt') }}：</span>
                    <span>{{ nextSiteInfo.title }}</span>
                    <el-icon size="16" color="#F06423"><CaretRight /></el-icon>
                </template>
            </div>
        </div>
        <h3 class="title">{{ siteInfo?.title }}</h3>
        <div class="rich-box" v-html="siteInfo?.description"></div>
        <QuickJump url="/console/mod/book"></QuickJump>
    </div>
    <EditWebPage ref="EditWebPageRef" :type="1" :title="$t('mod.book.index.tit')" @relRefresh="getFqaList" />
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import type { SiteInfo } from '@/types/siteInfo'
import SiteInfoService from '@/api/siteInfo'

import { goPage } from '@/utils/global'
import { useRoleStore } from '@/stores/role'
const roleStore = useRoleStore()
const route = useRoute()
const router = useRouter()
const id = computed(() => Number(route.query.id))
const siteList = ref<SiteInfo[]>([])
const siteInfo = ref<SiteInfo>()
const loading = ref(false)
const targetExists = ref(false)
import EditWebPage from '@/components/EditWebPage.vue'
import QuickJump from '@/components/QuickJump.vue'
const EditWebPageRef = ref()
const showEditWebPage = (action: any, id: any) => {
    EditWebPageRef.value.initDialog(action, id)
}

const jumpPageAction = (id: number) => {
    router.push({
        name: 'modBook',
        query: { id: id },
    })
}

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
import { ElMessage, ElMessageBox } from 'element-plus'
// 删除操作
const deleteAction = (id: number) => {
    ElMessageBox.confirm(t('mod.announcement.index.delete_tips_txt'), t('header.tools.notify.tip_txt'), {
        confirmButtonText: t('golbal.btn_text_4'),
        cancelButtonText: t('golbal.btn_text_3'),
        type: 'warning',
    })
        .then(() => {
            SiteInfoService.deleteAction(id)
                .then(res => {
                    getFqaList()
                })
                .finally(() => {
                    loading.value = false
                })
        })
        .catch(() => {})
}

const prevSiteInfo = computed(() => {
    const index = siteList.value.findIndex(item => item.id === siteInfo.value?.id)
    // if (index && index !== 0) {
    return siteList.value[index - 1]
    // } else {
    //     return undefined
    // }
})
const nextSiteInfo = computed(() => {
    const index = siteList.value.findIndex(item => item.id === siteInfo.value?.id)
    // if (index && index + 1 < siteList.value.length) {
    return siteList.value[index + 1]
    // } else {
    //     return undefined
    // }
})
function getFqaList() {
    loading.value = true
    SiteInfoService.FAQ()
        .then(res => {
            siteList.value = res
            if (isNaN(id.value)) goPage(`/console/mod/book?id=${siteList.value[0].id}`)
        })
        .finally(() => {
            loading.value = false
        })
}
function getFaqIfo() {
    loading.value = true
    SiteInfoService.info(id.value)
        .then(res => {
            siteInfo.value = res
        })
        .finally(() => {
            loading.value = false
        })
}

watch(
    () => route.fullPath,
    () => {
        getFqaList()
        if (!isNaN(id.value)) getFaqIfo()
    },
)

onMounted(() => {
    getFqaList()
    if (!isNaN(id.value)) getFaqIfo()
    targetExists.value = !!document.querySelector('#before-navigation')
})
</script>

<style lang="less" scoped>
.title {
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: 400;
}
.faq-list-box {
    margin-bottom: 24px;

    .card-text {
        ul {
            margin-right: -15px;
            max-height: 400px;
            overflow-y: auto;
            li {
                font-size: 14px;
                color: #f06423;
                margin: 4px 0;
                cursor: pointer;
                &:hover {
                    color: #000;
                }
            }
            .active {
                font-weight: bold;
                color: #000;
            }
        }
    }
}

h2 {
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.nav-top {
    margin-bottom: 8px;
    border-top: 1px solid #dee2e6;
    padding: 15px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .book-prev,
    .book-next {
        color: #f06423;
        font-size: 15px;
        cursor: pointer;

        display: flex;
        align-items: center;
    }
}
</style>
